<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import { SuccessFilled } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import api from "../API";
import * as echarts from "echarts";

const { proxy } = getCurrentInstance();
const stateX = useStore().state.store;
const tableData = ref(stateX.homeData.tableData.data);
const incomeCard = ref([]);
const userInfoData = ref({});
const loading = ref(null);

//初始化数据
onMounted(async () => {
  loading.value = true;
  await useStore().dispatch("getHomeData");
  tableData.value = stateX.homeData.tableData.data;
  incomeCard.value = await api.getGoodsList();
  userInfoData.value = stateX.userInfo;
  setLineEcharts();
  setBarEcharts();
  setPieEcharts();
  loading.value = false;
});

//定义Echart数据
let lineOption = reactive({
  grid: {
    left: "20%",
  },
  legend: {
    textStyle: {
      color: "#333",
    },
    data: [],
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#008c8c",
      },
    },
    axisLabel: {
      interval: 0,
      color: "#333",
    },
  },
  yAxis: {
    type: "value",
    axisLine: {
      lineStyle: {
        color: "#008c8c",
      },
    },
  },
  series: [],
});
let barOption = reactive({
  legend: {
    titleStyle: {
      color: "#333",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "20%",
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [],
  color: ["#2ec7c9", "#b6a2de"],
});
let pieOption = reactive({
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [],
});
//折线图
const setLineEcharts = () => {
  const { lineData } = stateX.homeData;
  const keyArr = Object.keys(lineData.data[0]);
  const series = [];
  keyArr.forEach((key) => {
    series.push({
      name: key,
      data: lineData.data.map((item) => item[key]),
      type: "line",
    });
  });
  lineOption.xAxis.data = lineData.date;
  lineOption.series = series;
  lineOption.legend.data = keyArr;
  const echart = echarts.init(proxy.$refs.lineChart);
  window.addEventListener("resize", () => {
    echart.resize();
  });
  echart.setOption(lineOption);
};
//柱状图
const setBarEcharts = () => {
  const { barData } = stateX.homeData;
  barOption.xAxis.data = barData.map((item) => item.date);
  barOption.series = [
    { name: "新增用户", data: barData.map((item) => item.new), type: "bar" },
    { name: "活跃用户", data: barData.map((item) => item.active), type: "bar" },
  ];
  const myEchart = echarts.init(proxy.$refs.barChart);
  window.addEventListener("resize", () => {
    myEchart.resize();
  });
  myEchart.setOption(barOption);
};
//饼图
const setPieEcharts = () => {
  const { pieData } = stateX.homeData;
  const series = {
    name: "商品",
    type: "pie",
    radius: "50%",
    data: pieData,
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
    },
  };
  pieOption.series = series;
  const myEchart = echarts.init(proxy.$refs.pieChart);
  window.addEventListener("resize", () => {
    myEchart.resize();
  });
  myEchart.setOption(pieOption);
};
</script>

<template>
  <el-row :gutter="10" v-loading.lock="loading">
    <el-col :span="8">
      <div class="row-left">
        <div class="user-info">
          <el-card class="user-card" shadow="always">
            <template #header>
              <div class="user">
                <div class="user-logo">
                  <img src="../assets/img/小猫探头.jpg" alt="" />
                </div>
                <div class="user-name">
                  <div class="name">{{ userInfoData.name }}</div>
                  <div class="title">{{ userInfoData.title }}</div>
                </div>
              </div>
            </template>
            <div class="notes">
              <div>
                登录时间： <span>{{ userInfoData.time }}</span>
              </div>
              <div>
                登录地址： <span>{{ userInfoData.ip }}</span>
              </div>
            </div>
          </el-card>
        </div>
        <div class="goods-info">
          <el-card shadow="always" class="goods-info-card">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="商品" />
              <el-table-column prop="today" label="今日购买" />
              <el-table-column prop="month" label="本月购买" />
              <el-table-column prop="all" label="总购买" />
            </el-table>
          </el-card>
        </div>
      </div>
    </el-col>

    <el-col :span="16">
      <div class="row-right">
        <div class="income-card">
          <el-card
            shadow="hover"
            v-for="(item, i) in incomeCard"
            :key="i"
            :body-style="{ display: 'flex', padding: '5px' }"
            class="income-card-item"
          >
            <el-icon color="#fff" size="30px"><SuccessFilled /></el-icon>

            <div class="income-data">
              <p class="num">￥{{ item.value }}</p>
              <p class="text">{{ item.name }}</p>
            </div>
          </el-card>
        </div>
        <div class="goods-data">
          <el-card class="line-data" shadow="always">
            <div ref="lineChart"></div>
          </el-card>
          <div class="other-data">
            <el-card shadow="always" :body-style="{ height: '100%' }">
              <div ref="barChart"></div>
            </el-card>
            <el-card shadow="always">
              <div ref="pieChart"></div>
            </el-card>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="less" scoped>
.el-row {
  height: 100%;
}
.row-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  .user-info {
    flex: 1;
    .user-card {
      .user {
        display: flex;
        justify-content: start;
        align-items: center;
        .user-logo {
          flex-shrink: 0;
          width: 150px;
          height: 150px;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px solid #fff;
          }
        }
        .user-name {
          .name {
            font-size: 2em;
            font-weight: bolder;
            margin: 10px 0;
          }
          .title {
            font-size: 14px;
            color: #aaa;
          }
        }
      }
      .notes {
        font-size: 14px;
        color: #aaa;
        font-weight: 500;
        line-height: 30px;
        span {
          margin: 0 20px;
        }
      }
    }
  }
  .goods-info {
    margin-top: 20px;
    flex: 2;

    .goods-info-card {
      height: 100%;
    }
  }
}
.row-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  .income-card {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .income-card-item {
      margin-bottom: 20px;
      width: 32%;
    }
    i {
      width: 80px;
      height: 80px;
      background-color: #67c23a;
      text-align: center;
      line-height: 80px;
      flex-shrink: 0;
    }
    .income-data {
      flex: 1;
      display: flex;
      margin-left: 15px;
      flex-direction: column;
      justify-content: center;
      .num {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        box-sizing: border-box;
      }
      .text {
        color: #999;
        font-size: 14px;
      }
    }
  }
  .goods-data {
    flex: 3;
    display: flex;
    flex-direction: column;

    .line-data {
      flex: 1;
      height: 280px;
      div {
        height: 280px;
        width: 100%;
      }
    }
    .other-data {
      flex: 1;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .el-card {
        width: 48%;
        div {
          height: 260px;
          width: 100%;
        }
      }
    }
  }
}
</style>
